<template>
    <div>
        <div class="header">
            <div>
                <i class="iconfont icon-back"></i>
            </div>
            <div>
                <router-link to="proCate">
                    <h2>商品分类</h2>
                </router-link>
            </div>
            <div>
                <i class="iconfont icon-search"></i>
                <i class="iconfont icon-gengduo"></i>
            </div>
        </div>
        <ul class="type-bar">
            <li class="item" :class="item.class" v-for="(item,index) in typeArray" v-bind:key="index">
                <img v-bind:src="item.imgSrc" alt="">
                <h3>{{item.title}}</h3>
            </li>
        </ul>
        <div class="content">
            <div class="section">
                <div class="title">
                    <h2>保加利亚之爱系列</h2>
                    <div class="more"></div>
                </div>
                <div class="list">
                    <div class="item">
                        <img src="../image/pro_cate_pic_11.jpg" alt="">
                        <h4>亮泽雪肤霜</h4>
                    </div>
                    <div class="item">
                        <img src="../image/pro_cate_pic_11.jpg" alt="">
                        <h4>亮泽雪肤霜</h4>
                    </div>
                    <div class="item">
                        <img src="../image/pro_cate_pic_11.jpg" alt="">
                        <h4>亮泽雪肤霜</h4>
                    </div>
                    <div class="item">
                        <img src="../image/pro_cate_pic_11.jpg" alt="">
                        <h4>亮泽雪肤霜</h4>
                    </div>
                    <div class="item">
                        <img src="../image/pro_cate_pic_11.jpg" alt="">
                        <h4>亮泽雪肤霜</h4>
                    </div>
                    <div class="item">
                        <img src="../image/pro_cate_pic_11.jpg" alt="">
                        <h4>亮泽雪肤霜</h4>
                    </div>
                    <div class="item">
                        <img src="../image/pro_cate_pic_11.jpg" alt="">
                        <h4>亮泽雪肤霜</h4>
                    </div>
                    <div class="item">
                        <img src="../image/pro_cate_pic_11.jpg" alt="">
                        <h4>亮泽雪肤霜</h4>
                    </div>
                </div>
            </div>
            <div class="section">
                <div class="title">
                    <h2>保加利亚之爱系列</h2>
                    <div class="more"></div>
                </div>
                <div class="list">
                    <div class="item">
                        <img src="../image/pro_cate_pic_11.jpg" alt="">
                        <h4>亮泽雪肤霜</h4>
                    </div>
                    <div class="item">
                        <img src="../image/pro_cate_pic_11.jpg" alt="">
                        <h4>亮泽雪肤霜</h4>
                    </div>
                    <div class="item">
                        <img src="../image/pro_cate_pic_11.jpg" alt="">
                        <h4>亮泽雪肤霜</h4>
                    </div>
                    <div class="item">
                        <img src="../image/pro_cate_pic_11.jpg" alt="">
                        <h4>亮泽雪肤霜</h4>
                    </div>
                    <div class="item">
                        <img src="../image/pro_cate_pic_11.jpg" alt="">
                        <h4>亮泽雪肤霜</h4>
                    </div>
                    <div class="item">
                        <img src="../image/pro_cate_pic_11.jpg" alt="">
                        <h4>亮泽雪肤霜</h4>
                    </div>
                    <div class="item">
                        <img src="../image/pro_cate_pic_11.jpg" alt="">
                        <h4>亮泽雪肤霜</h4>
                    </div>
                    <div class="item">
                        <img src="../image/pro_cate_pic_11.jpg" alt="">
                        <h4>亮泽雪肤霜</h4>
                    </div>
                </div>
            </div>
            <div class="section">
                <div class="title">
                    <h2>保加利亚之爱系列</h2>
                    <div class="more"></div>
                </div>
                <div class="list">
                    <div class="item">
                        <img src="../image/pro_cate_pic_11.jpg" alt="">
                        <h4>亮泽雪肤霜</h4>
                    </div>
                    <div class="item">
                        <img src="../image/pro_cate_pic_11.jpg" alt="">
                        <h4>亮泽雪肤霜</h4>
                    </div>
                    <div class="item">
                        <img src="../image/pro_cate_pic_11.jpg" alt="">
                        <h4>亮泽雪肤霜</h4>
                    </div>
                    <div class="item">
                        <img src="../image/pro_cate_pic_11.jpg" alt="">
                        <h4>亮泽雪肤霜</h4>
                    </div>
                    <div class="item">
                        <img src="../image/pro_cate_pic_11.jpg" alt="">
                        <h4>亮泽雪肤霜</h4>
                    </div>
                    <div class="item">
                        <img src="../image/pro_cate_pic_11.jpg" alt="">
                        <h4>亮泽雪肤霜</h4>
                    </div>
                    <div class="item">
                        <img src="../image/pro_cate_pic_11.jpg" alt="">
                        <h4>亮泽雪肤霜</h4>
                    </div>
                    <div class="item">
                        <img src="../image/pro_cate_pic_11.jpg" alt="">
                        <h4>亮泽雪肤霜</h4>
                    </div>
                </div>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
import Footer from "../template/footer";
export default {
  name: "proCateComponent",
  components: {
    Footer
  },
  data() {
    return {
      on: "on",
      index: this.$route.query.id,
      typeArray: [
        {
          id: 1,
          imgSrc: require("../image/pro_cate_1.png"),
          title: "精油原液"
        },
        {
          id: 2,
          imgSrc: require("../image/pro_cate_2.png"),
          title: "植物精油"
        },
        {
          id: 3,
          imgSrc: require("../image/pro_cate_3.png"),
          title: "旺斯指纹"
        },
        {
          id: 4,
          imgSrc: require("../image/pro_cate_4.png"),
          title: "海洋之心"
        },
        {
          id: 5,
          imgSrc: require("../image/pro_cate_5.png"),
          title: "埃及之诺"
        },
        {
          id: 6,
          imgSrc: require("../image/pro_cate_6.png"),
          title: "冰霜面膜"
        },
        {
          id: 7,
          imgSrc: require("../image/pro_cate_2.png"),
          title: "丝滑雪肤"
        },
        {
          id: 8,
          imgSrc: require("../image/pro_cate_3.png"),
          title: "精油手霜"
        }
      ]
    };
  },
  created() {
    let index = this.index;
    if (index) {
      this.typeArray[index - 1].class = this.on;
    } else {
      this.typeArray[0].class = this.on;
    }
  }
};
</script>

<style scoped lang="less">
@import "../style/proCategories.less";
</style>